<template>
  <div class="cart">
    <div class="back-icon-box">
      <van-nav-bar title="购物车" :left-text="exitText" @click-left="changeText" />
    </div>
    <div class="goods-list">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-swipe-cell v-for="(item, i) in products" :key="i">
          <div class="content-box">
            <van-checkbox
              :name="item"
              v-model="item.check"
              @click="check(i)"
            ></van-checkbox>
            <img :src="item.src" alt="" />
            <div class="detail">
              <h3>{{ item.title }}</h3>
              <span class="sku">{{ item.up }}&#x3000;{{ item.btm }}</span>
              <div>
                <span class="red">￥{{ item.price }}</span>
                <van-stepper @change="onChange" v-model="item.num" />
              </div>
            </div>
          </div>
          <template #right>
            <van-button
              square
              @click="delItem(i)"
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </div>
    <div class="bottom-order">
      <div>
        <van-checkbox :checked="checked" @click="checkAll">全选</van-checkbox>
      </div>
      <div>
        <span class="red">合计：￥{{ sum.toFixed(2) }}</span>
        <button @click="btnEvent">{{ byBtnText }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      sum: 0,
      result: [],
      checked: false,
      exitText: "编辑",
    };
  },
  computed: {
    ...mapState(["products"]),
    byBtnText() {
      if (this.exitText == "编辑") {
        return "下单";
      } else {
        return "删除";
      }
    },
  },
  methods: {
    ...mapMutations(["del", "exitProducts", "check"]),
    checkAll() {
      this.checked = !this.checked;
      this.$refs.checkboxGroup.toggleAll(this.checked);
    },

    onChange() {
      this.sum = 0;
      this.result.forEach((item) => {
        this.sum += item.price * item.num;
      });
    },

    changeText() {
      // console.log(this.exitText);
      this.exitText = this.exitText == "编辑" ? "完成" : "编辑";
    },

    btnEvent() {
      if (this.byBtnText == "删除") {
        let arr = this.products.filter((item) => {
          return !item.check;
        });
        this.exitProducts(arr);
        this.result = [];
        if (arr === 0) {
          this.checked = false;
        }
      }
    },

    delItem(i) {
      this.del(i);
      this.sum = 0;
      this.products.forEach((item) => {
        // console.log(item.check);
        if (item.check) {
          this.sum += item.price * item.num;
        }
      });
      if (this.products.length === 0) {
        this.checked = false;
      }
      this.$router.go(0);
    },
  },
  watch: {
    result(to) {
      this.sum = 0;
      if (to.length === this.products.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }

      to.forEach((item) => {
        this.sum += item.price * item.num;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.cart {
  background-color: #fff;
}
.goods-list {
  padding-bottom: 100px;
  .content-box {
    display: flex;
    font-size: 26px;
    padding: 40px 30px;
    img {
      width: 160px;
      height: 160px;
      border-radius: 8px;
      display: block;
      margin: 0 30px;
    }
    .detail {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .sku {
        font-size: 24px;
        color: #b2b2b2;
      }
      & > div {
        display: flex;
        width: 400px;
        justify-content: space-between;
        align-items: center;
        .red {
          color: #d00;
        }
      }
    }
  }
}
.bottom-order {
  position: fixed;
  bottom: 100px;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  font-size: 28px;
  border-top: 1px solid #eee;
  padding-left: 30px;
  .red {
    color: #d00;
  }
  button {
    width: 200px;
    height: 100px;
    background-color: #d00;
    color: #fff;
    border: none;
    outline: none;
    margin-left: 40px;
  }
}

/deep/ .van-button--danger {
  height: 100%;
}
</style>
